<template>
  <div>
    <!-- 边框 -->
    <el-card class="box-card" style="margin-top: 10px">
      <!-- 搜索框 -->
      <div
        style="margin-top: -55px; width: 35%; position: relative; height: 120px"
      >
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
        <el-button
          class="button"
          type="primary"
          @click="dialogFormVisible = true"
          >添加用户</el-button
        >
      </div>

      <!-- 搜索框 -->
      <!-- 表格 -->
      <template>
        <el-table :data="uk" border style="width: 100%">
          <!-- # -->
          <el-table-column type="index" label="#" width="50"> </el-table-column>
          <!-- 姓名 -->
          <el-table-column prop="username" label="姓名" width="180">
          </el-table-column>
          <!-- 邮箱 -->
          <el-table-column prop="email" label="邮箱" width="180">
          </el-table-column>
          <!-- 电话 -->
          <el-table-column prop="mobile" label="电话" width="180">
          </el-table-column>
          <!-- 角色 -->
          <el-table-column prop="role_name" label="角色" width="180">
          </el-table-column>
          <!-- 状态 -->
          <el-table-column prop="mg_state" label="状态" width="180">
            <el-tooltip :content="'Switch value: ' + value" placement="top">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="100"
                inactive-value="0"
              >
              </el-switch>
            </el-tooltip>
          </el-table-column>
          <!-- 操作 -->

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
              ></el-button>

              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              ></el-button>
              <el-button type="warning" icon="el-icon-share"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 表格 -->
      <!-- 添加对话框 -->
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <!-- 内容 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <!-- 邮箱 -->
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <!-- 手机 -->
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
        </el-form>

        <!-- 内容 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加对话框 -->
      <!-- 分页 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pagenum"
          :page-sizes="[3, 5, 7, 9]"
          :page-size="params.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.length"
        >
        </el-pagination>
      </div>
      <!-- 分页 -->
      <!-- 编辑对话框 -->
      <el-dialog title="修改用户" :visible.sync="dialogFormVisible1">
        <!-- 内容 -->
        <el-form
          :model="ruleForm1"
          :rules="rules1"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm1.username" :disabled="true"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm1.password"></el-input>
          </el-form-item>
          <!-- 邮箱 -->
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm1.email"></el-input>
          </el-form-item>
          <!-- 手机 -->
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm1.mobile"></el-input>
          </el-form-item>
        </el-form>

        <!-- 内容 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="edit()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑对话框 -->
    </el-card>
    <!-- 边框 -->
  </div>
</template>

<script>
//引入
import { users, add, del, edit } from "@/request/api.js";
export default {
  data() {
    return {
      //备份数据
      data: [],
      //对话框长度
      formLabelWidth: "120px",
      // formLabelheight: '300px',
      //数据
      input: "",
      list: [],
      //表格数据
      list: [
        {
          index: "",
          username: "",
          email: "",
          mobile: "",
          role_name: "",
          mg_state: "",
        },
      ],
      //状态
      value: 100,
      //参数
      params: {
        query: "",
        pagenum: 1,
        pagesize: 50,
      },
      //对话框状态
      dialogFormVisible: false,
      //修改对话框状态
      dialogFormVisible1: false,
      //对话框数据
      ruleForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      //编辑对话框数据
      ruleForm1: {
        username: "",
        password: "",
        email: "",
        mobile: "",
        id: null,
      },
      //对话框规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入电话", trigger: "blur" }],
      },
      //编辑对话框规则
      rules1: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入电话", trigger: "blur" }],
      },
    };
  },
  methods: {
    //请求数据
    all() {
      users(this.params).then((res) => {
        // console.log(res);
        this.list = res.data.data.users;
        this.data = res.data.data.users;
      });
    },
    //添加
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.ruleForm).then((res) => {
            // console.log(res);
            this.$message("添加成功");
          });
          this.dialogFormVisible = false;
          //添加对话框数据
          this.all();
          // console.log(this.ruleForm);
          // alert('submit!');
          //清空数据
          this.ruleForm = {
            username: "",
            password: "",
            email: "",
            mobile: "",
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除数据
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del({ id: row.id }).then((res) => {
            // console.log(res);
            this.all();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分页
    //每页多少条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
    },
    //当前第几页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.pagesize = val;
    },
    //搜索
    search() {
      this.params.query = this.input;
      this.all();
      this.$message({
        message: "搜索成功",
        type: "success",
      });
    },
    //编辑回填
    handleEdit(row) {
      console.log(row);
      this.dialogFormVisible1 = true;
      this.ruleForm1.username = row.username;
      this.ruleForm1.password = row.password;
      this.ruleForm1.mobile = row.mobile;
      this.ruleForm1.email = row.email;
      this.ruleForm1.id = row.id;
    },
    //编辑修改
    edit() {
      edit(this.ruleForm1.id, this.ruleForm1).then((res) => {
        console.log(res);
        this.all();
        this.dialogFormVisible1 = false;
      });
    },
  },
  //请求数据
  created() {
    this.all();
  },
  mounted() {},
  components: {},
  computed: {
    uk() {
      return this.data.slice(
        (this.params.pagenum - 1) * this.params.pagesize,
        this.params.pagesize * this.params.pagenum
      );
    },
  },
  watch: {},
};
</script>

<style lang='scss' scoped>
// .l-input{
//     // margin-right: -120px;
//     width: 50%;
// }
.button {
  position: absolute;
  top: 62px;
  left: 470px;
}
.input-with-select {
  margin-top: 60px;
}
</style>
